<template>
    <div class="timeline">
      <div class="timeline-track">
        <div
          class="timeline-point"
          v-for="(step, index) in steps"
          :key="index"
          :class="{ 'completed': step.completed }"
          :style="{
            top: `${(index * 100) / (steps.length - 1)}%`,
          }"
          @click="toggleStep(index)"
        >
          <div class="point-marker"></div>
          <div class="point-content">{{ step.content }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CourseTimeline',
    props: {
      courseId: {
        type: [String, Number],
        required: true
      },
      steps: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      toggleStep(index) {
        this.$emit('step-toggle', index);
      }
    }
  }
  </script>
  
  <style scoped>
  .timeline {
    position: relative;
    height: 100%;
    width: 100px;
    padding: 20px 0;
  }
  
  .timeline-track {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: calc(100% - 40px);
    background-color: #e8e8e8;
  }
  
  .timeline-point {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
  
  .point-marker {
    width: 16px;
    height: 16px;
    background-color: #13227a;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .point-content {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    color: #666;
  }
  
  .completed .point-marker {
    background-color: #52c41a;
  }
  
  .completed .point-content {
    color: #52c41a;
  }
  </style>